<template>

    <div class="agreement-container">
      <div class="content-box">
        <h1>用户服务协议</h1>
        <div class="content">
          <section>
            <h2>首部及导言</h2>
            <p>欢迎您使用养老服务整合平台！在此特别提醒您认真阅读、充分理解本协议（特别是以粗体下划线标识的内容）。除非您接受本协议所有条款，否则您无权使用本协议项下所提供的服务。</p>
          </section>

          <section>
            <h2>一、服务条款的确认和接受</h2>
            <p>1.1 用户同意所有注册协议条款并完成注册程序后，将视为用户已确认接受本协议全部条款，并成为养老服务整合平台的正式用户。</p>
            <p>1.2 本协议可由平台运营方随时更新，更新后的协议条款一旦公布即代替原来的协议条款，用户可在本平台查阅最新版协议条款。</p>
          </section>

          <section>
            <h2>二、服务内容</h2>
            <p>2.1 本平台提供以下养老服务：</p>
            <ul>
              <li>• 养老机构信息展示与预约</li>
              <li>• 健康管理服务对接</li>
              <li>• 居家养老配套服务</li>
              <li>• 医疗护理资源匹配</li>
            </ul>
          </section>

          <section>
            <h2>三、用户权利义务</h2>
            <p>3.1 用户有权：</p>
            <ul>
              <li>• 在遵守本协议前提下使用平台各项服务</li>
              <li>• 对平台服务提出改进建议</li>
              <li>• 申请注销账户</li>
            </ul>

            <p>3.2 用户不得：</p>
            <ul>
              <li>• 发布虚假养老服务需求</li>
              <li>• 进行任何商业广告行为</li>
              <li>• 侵犯他人隐私权</li>
            </ul>
          </section>

          <section>
            <h2>四、免责声明</h2>
            <p class="emphasis">4.1 用户理解并同意，因以下情况导致的损失，平台不承担责任：</p>
            <ul>
              <li>• 不可抗力因素造成的服务中断</li>
              <li>• 用户操作失误导致的损失</li>
              <li>• 第三方服务提供者的服务质量问题</li>
            </ul>
          </section>

          <section>
            <h2>五、协议生效</h2>
            <p>本协议自用户勾选同意并完成注册之日起生效，有效期至用户注销账户之日终止。</p>
          </section>
        </div>
        <el-button type="primary" @click="goBack" class="back-btn">返回注册</el-button>
      </div>
    </div>


</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goBack = () => {
  router.go(-1)
}
</script>

<style scoped>
.agreement-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  padding: 2rem;
  background: #f5f7fa;
}

/* 增强内容盒子样式 */
.content-box {
  width: 100%;
  max-width: 1200px;
  margin: 2rem;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1);
  padding: 3rem;
  position: relative;
  transform: translateY(0);
  transition: transform 0.3s ease;
}

/* 添加动态效果 */
.content-box:hover {
  transform: translateY(-0.5rem);
}

/* 移动端优化 */
@media (max-width: 768px) {
  .agreement-container {
    padding: 1rem;
  }

  .content-box {
    margin: 1rem;
    padding: 1.5rem;
    border-radius: 0.75rem;
  }
}

h1 {
  text-align: center;
  margin-bottom: 32px;
  color: #303133;
  font-size: 28px;
  font-weight: 600;
}

h2 {
  color: #409eff;
  margin: 24px 0 16px;
  font-size: 20px;
  border-left: 4px solid #409eff;
  padding-left: 12px;
}

.content {
  line-height: 1.8;
  color: #606266;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0 20px;
}

section {
  margin-bottom: 32px;
}

ul {
  padding-left: 24px;
  margin: 12px 0;
}

li {
  margin-bottom: 8px;
}

.emphasis {
  color: #f56c6c;
  font-weight: 500;
}

.back-btn {
  margin-top: 40px;
  width: 160px;
  height: 44px;
  font-size: 16px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.3s ease;
}

.back-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

@media (max-width: 768px) {
  .content-box {
    padding: 24px;
    margin: 10px;
  }

  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 18px;
  }

  .content {
    padding: 0 10px;
  }
}

/* 新增的样式细节 */
h2 {
  position: relative;
  transition: color 0.3s ease;
}

h2:hover {
  color: #337ecc;
}

ul {
  background: #f8fafc;
  border-radius: 8px;
  padding: 16px 24px;
}

li::marker {
  color: #409eff;
}

.content::-webkit-scrollbar {
  width: 6px;
}

.content::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
}

.content::-webkit-scrollbar-track {
  background: #f5f7fa;
}
</style>